<template>
	<view class="page1" :style="'background-image: url(' + $c.config.media + 'yuemini/reg_bg.png);'">
		<c-gap height="30rpx" />
		<view class="top-icon" :style="{top:heigh + 'px'}" @click="to()">
			<image class="img"
				:src="$c.config.imageIP + 'yuemini/ic_back.png'"
				mode="aspectFill"></image>
		</view>
		<scroll-view class="info-content" style="background:none;" scroll-y>
			<view class="content-warp">
				<c-gap height="162rpx" />
				<view class="base-info">
					<view class="info-avater">
						<image :src="info.pic"></image>
					</view>
					<view class="info-name">
						<view class="info-name-line1">
							<view class="nick-name" style="color:#fff; font-size: 26rpx;">{{ info.nick }}</view>
							<view>
								<image class="sex_icon" v-if="info.sex == 1"
									:src="$c.config.media + 'mini/common/man.png'" mode="" />
								</image>
								<image class="sex_icon" v-else :src="$c.config.media + 'mini/common/woman.png'"></image>
							</view>
							<!-- 自己而且男的不显示真人及ai -->
							<view v-if="!(info.sex==1 && my==1)">
								<image class="info-real" :src="$c.config.media + 'mini/common/real.png'" mode="">
								</image>
							</view>
							<view v-if="!(info.sex==1 && my==1)">
								<image class="info-pass" :src="$c.config.media + 'yeye/ai.png'" mode="">
								</image>
							</view>
						</view>
						<c-gap height="20rpx" />
						<view class="info-name-line1 address">
							<view class="idshow">
								<image :src="$c.config.media + 'yeye/id_icon.png'" mode="" class="id_icon"></image>
								<text>{{ info.id }}</text>
							</view>
						</view>
					</view>
					<view class="collect" v-if="my != 1">
						<uni-icons type="heart-filled" size="20" v-if="guanzhuState == 2" color="#fff"
							@click="guanzhu(1)"></uni-icons>
						<uni-icons type="heart" size="20" color="#fff" v-else @click="guanzhu(2)"></uni-icons>
					</view>
					<view class="edit" v-if="my == 1" @click="toUserEdit">
						编辑资料
					</view>
				</view>
				<c-gap height="28rpx" />
				<view class="info-jieshao-content" v-if="info.mysign != ''">
					{{ info.mysign }}
				</view>
				<view v-else class="info-jieshao-content">这个人很懒，什么都没留下</view>

				<view class="age-line">
					<view class="age-line-item">
						<view class="value">{{info.age}}</view>
						<c-gap height="14rpx" />
						<view class="key">年龄</view>
					</view>
					<view class="age-line-item">
						<view class="value">{{ info.shengao }}</view>
						<c-gap height="14rpx" />
						<view class="key">身高</view>
					</view>
					<view class="age-line-item">
						<view class="value">{{ info.tizhong }}</view>
						<c-gap height="14rpx" />
						<view class="key">体重</view>
					</view>
					<view v-if="iswxflag==1" class="age-line-item">
						<view class="value">单身</view>
						<c-gap height="14rpx" />
						<view class="key">配偶</view>
					</view>

				</view>


				<c-gap height="32rpx" />
				<view class="lable-line">
					<view class="lable lable1">已认证</view>
					<view class="lable lable2">{{info.shiming}}</view>
					<view class="lable lable3">已绑定</view>
				</view>
				<c-gap v-if="iswxflag==1" height="10px" />
				<view v-if="iswxflag==1" class="weixin">
					<image src="https://zhiyuapp.oss-cn-fuzhou.aliyuncs.com/uniapp_android/image/lalaq/home_wechat.png" mode="" class="weixin_icon"></image>
					<text class="weixin-text"
						@tap="shejiao(['微信'], [info.weChatNum])">{{replaceStar(info.weChatNum)}}</text>
				</view>
				<c-gap height="24rpx" />
				<view class="info-h2">
					个人信息
				</view>

				<c-gap height="34rpx" />
				<view class="xinxi-line">
					<view class="xinxi-item">
						<view><text class="key">性别：</text><text class="value">{{info.sex == 2? '女': '男'}}</text></view>
						<view><text class="key">年龄：</text><text class="value">{{info.age}}岁</text></view>
					</view>
					<view class="xinxi-item">
						<!-- <view><text class="key">城市：</text><text class="value">{{getCity()}}</text></view> -->
						<view><text class="key">学历：</text><text class="value">{{info.eduStatusRu || '保密'}}</text></view>
						<view><text class="key">职业：</text><text class="value">{{ info.zhiyename || '保密'}}</text></view>
					</view>
					<view class="xinxi-item">
						<view><text class="key">身高：</text><text class="value">{{info.shengao || '保密'}}</text></view>
						<view><text class="key">体重：</text><text class="value">{{ info.tizhong || '保密' }}</text></view>
					</view>
					<view class="xinxi-item">
						
						<view><text class="key">年收入：</text><text class="value">{{ info.nianshouru || '保密' }}</text></view>
					</view>
				</view>
				<c-gap height="24rpx" />

				<view class="photo-line">
					<view class="info-h2">
						TA的相册
					</view>
					<view class="info-photo-empty" v-if="list.length == 0">TA还没有上传图片哦</view>
					<view class="info-photo-have" v-else>
						<view v-for="(item, index) in list" class="info-photo-view" :key="item.id">
							<image @tap.stop="preview(index)" :key="index" :src="item.img" mode="widthFix"></image>
						</view>
						<view class="info-photo-view"></view>
					</view>
				</view>
			</view>
		</scroll-view>
		
		<view class="btns" v-if="my != 1">
			<view v-if="iswxflag==1"  class="btn btn1" @click="goMsg" style="color:#fff"> 私聊</view>
			<!-- <view v-if="vipopen==1" class="btn btn2" @tap="shejiao(['微信'], [info.weChatNum])">社交账号</view> -->
		</view>
		<uni-popup ref="unvip">
			<view class="unvip-wrap">
				<view class="unvip-content">此操作升级为会员才可以操作哦</view>
				<view class="unvip-btn" @tap="unvipHandle">去升级会员</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import {
		to
	} from '@/utils/index.js';
	import CGap from '@/components/c-gap.vue';
	export default {
		components: {
			CGap
		},
		data() {
			return {
				$c: this.$c,
				list: [],
				dongtaiList: [],
				my: 0,
				heigh:50,
				iswxflag:1,
				isVip: 0,
				pageno: 1,
				guanzhuState: 2,
				vipopen:0,
				video: {
					innerAudioContext: {},
					status: false,
					userid: 0
				},
				userid: 0,
				navIndex: 1,
				isPlay: true,
				pageheigh:0,
				info: {
					signatureDto: {}
				},
				navList: [{
						title: '关于我'
					},
					{
						title: '动态'
					}
				],
				sameCity: false,
			}
		},
		onHide() {
			if (this.video.innerAudioContext) {
				this.video.innerAudioContext.destroy();
			}
			console.log("onHide")
		},
		onLoad(option) {
			if (option) {
				if(option.sameCity){
					this.sameCity = option.sameCity;
				}
			}
			// #ifdef APP-PLUS
			this.heigh = this.$store.state.StatusBar.statusBar; 
			// #endif
			
			this.userid = option.userid;
			this.my = option.my;
			this.getInfo();
			this.onNav(1);
		},
		onReachBottom() {
			if (this.navIndex == 1) {
				this.pageno++;
				this.getDongtai()
			}
		},
		onPullDownRefresh() {
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onShow() {
				this.vipopen =uni.getStorageSync('vipopen');
			
			// #ifdef MP-WEIXIN
			this.iswxflag= uni.getStorageSync('iswx');			
			// #endif
			this.getvipData();
		},
		methods: {
			to,
			toUserEdit(){
				uni.navigateTo({
					url:'/pages/m-pages/m-user-edit/m-user-edit'
				})
			},
			guanzhu(state) {
				this.guanzhuState = state
			},
			replaceStar(str) {
				if (str) {
					var len = str.length;
					if (len <= 4) {
						return "******";
					} else {
						var regex = /^(.{0,2}).*?(.{2})$/; // 匹配字符串的前两位和最后2位
						return str.replace(regex, "$1*****$2")
					}
				} else {
					return "******";
				}
			},
			async getvipData() {
				let res = await this.$c.post("/app/vip/list")
				if (res.code == 0) {
					this.isVip = res.data.user.isVip;
				}
			},
			shejiao(nameList, valueList){

				if(this.isVip==0)
				{
					this.$refs.unvip.open();
				}else{
					if(this.info.weChatNum.length==0)
					{
						uni.showModal({
							title: '提示',
							content: '她隐藏或未填写社交账号，与TA私聊了解更多',
							confirmText: '去私聊',
							success: (res) => {
								if (res.confirm) {
								this.goMsg();
								}
							}
						});
						return;
					}else
					{
						uni.setClipboardData({
						  data: valueList[0],
						  success(res) {
						    // 成功后的处理逻辑
						    console.log('已成功复制');
						  },
						  fail(err) {
						    // 失败时的处理逻辑
						    console.error('复制失败', err);
						  }
						});
						// uni.showModal({
						// 	title: '提示',
						// 	content: this.info.phoneNum,
						// 	confirmText: '去私聊',
						// 	success: (res) => {
						// 	 if (res.confirm) {
						// 	 this.goMsg();
						// 	 }
						// 	}
						// });
					}
				}
			},
			unvipHandle() {
				this.$refs.unvip.close();
				this.$c.jump('/pages/m-pages/m-vip/index');
			},
			open() {
				let info = this.info;
				uni.showModal({
					title: '提示',
					content: `位置：` + info.address + `
经纬度：` + info.lat + `,` + info.lon + `
金币：` + info.voicePrice + `
钻石:` + info.videoPrice,
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			async handleCalling(e) {

				let type = e.currentTarget.dataset.value;
				console.log(this.info.tengxuncode, '通话id');
				let res = await this.$c.post("/app/user/isEnoughVideoAndVoice?tengxuncode=" + this.info.tengxuncode +
					"&type=" + Number(type))
				if (res.code != 0) {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
				}

				// 小程序通话
				// #ifdef  MP-WEIXIN
				this.$refs.TUICalling.call({
					userID: this.info.tengxuncode,
					type: type
				});
				// #endif

				// APP通话
				// #ifdef  APP-PLUS
				uni.$TUICallKit.call({
						userID: this.info.tengxuncode,
						callMediaType: Number(type)
					},
					res => {
						if (res.code === 0) {
							let type = Number(type) == 1 ? 2 : 3;
							this.$c.post("/app/user/feeDeduction?txCode=" + this.info.tengxuncode + "&type=" +
								type)
							console.log('call success');
						} else {
							console.log(`${res.msg}`);
						}
					}
				);
				// #endif
			},
			onPlay() {
				if (this.video.status) {
					//暂停
					this.video.innerAudioContext.stop();
					this.video.status = false;
				} else {
					console.log('播放')
					//播放
					this.video.innerAudioContext.play();
					this.video.status = true;
				}
			},
			goMsg() {
				uni.navigateTo({
					url: `/im/chat/chat?userid=` + this.userid + `&conversationID=C2C` + this.info.tengxuncode,
				});
			},
			async getInfo() {
				// console.log(this.userid)
				let res = await this.$c.post("/app/user/lookTinfo?userid=" + this.userid)
				if (res.code != 0) {
				
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
				}
				this.info = res.data
				if(!this.info.mysign)
				{
					this.info.mysign ='';
				}
				 console.log(JSON.stringify(this.info)+'55555555'+this.info.mysign);
				this.video.innerAudioContext = uni.createInnerAudioContext();
				if (this.info.signatureDto && this.info.signatureDto.voiceUrl) {
					this.video.innerAudioContext.src = this.info.signatureDto.voiceUrl;
				} else {
					this.info.signatureDto = {}
				}
				if (!this.info.shengao) {
					this.info.shengao = '保密';
				}
				if (!this.info.tizhong) {
					this.info.tizhong = '保密';
				}
				
				let shiming = uni.getStorageSync(this.userid);
				
				if(shiming)
				{
					this.info.shiming =shiming;
				}else
				{
					let s = Math.floor(Math.random() * 2) + 0;
					// console.log(s+'*******4444****');
					let listt =['已实名','待实名'];
					shiming =listt[s];
					this.info.shiming =shiming;
					uni.setStorageSync(this.userid, shiming);			
				}

				this.video.innerAudioContext.autoplay = false;
				this.video.innerAudioContext.onPlay(() => {
					this.video.status = true;
					console.log('开始播放');
				});
				// this.video.innerAudioContext.onError((res) => {
				//   console.log(res.errMsg);
				//   console.log(res.errCode);
				// });
				this.video.innerAudioContext.onEnded((res) => {
					this.video.status = false;
					console.log('播放结束');
				});
				console.log("======", this.info, "=========")
				this.list.push({
					img: this.info.pic
				})
				if (this.info.xingxiang) {
					let xingxiang = this.info.xingxiang.split(',');
					for (let item of xingxiang) {
						if (item != '') {
							this.list.push({
								img: item
							})
						}
					}
				}
				this.guanzhuState = this.info.guanzhuState;
				console.log(this.list)
				console.log(res.data)
			},
			preview(i) {
				if (this.list.length > 0) {
					let urls = [];
					for (let i = 0; i < this.list.length; i++) {
						urls.push(this.list[i].img);
					}
					uni.previewImage({
						current: i,
						urls: urls,
						loop: true
					});
				}
			},
			onNav(index) {
				this.navIndex = index
				if (index == 1) {
					this.dongtaiList = [];
					this.pageno = 1;
					this.getDongtai()
				}
				console.log(index)
			},
			async getDongtai() {
				let res = await this.$c.post("/app/user/getTdongtai?userid=" + this.userid + "&pageno=" + this.pageno)
				this.dongtaiList = this.dongtaiList.concat(res.data)
			},
			getCity(){
				let city = '保密'
				if(this.sameCity=='true'){
					if(uni.getStorageSync('city')){
						city = uni.getStorageSync('city')
					}
				}else{
					if(this.info.address){
						city = this.info.address
					}
				}
				return city
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page1 {
		display: flex;
		flex-direction: column;
		position: relative;
		height: 100vh;
		background: #000;
	}

	.top-icon {
		margin-top: 20rpx;
		position: absolute;
		left: 30rpx;
		z-index: 99;
		width: 50rpx;
		height: 50rpx;
	}

	.top {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 550rpx;

		.voice {
			position: absolute;
			z-index: 2;
			left: 30rpx;
			bottom: 100rpx;
			box-sizing: border-box;
			padding: 0 8rpx 0 0;
			width: 260rpx;
			height: 50rpx;
			border-radius: 25rpx;
			background-color: #ff0f6f;

			.voice-icon {
				width: 50rpx;
				height: 50rpx;
				overflow: hidden;
				border-radius: 50%;
			}

			.voice-img {
				height: 100%;
				margin: 0 10rpx;
			}

			.voice-value {
				box-sizing: border-box;
				margin-right: 10rpx;
			}
		}

	}

	.content {
		box-sizing: border-box;
		padding: 30rpx 40rpx;
		position: relative;
		z-index: 2;
		width: 100%;
		border-radius: 30rpx 30rpx 0 0;

		.content-row {
			width: 100%;
			margin-bottom: 30rpx;

			.content-row-l {
				.content-row-l-icon {
					width: 50rpx;
					height: 50rpx;
					margin-right: 10rpx;
				}

				view {
					color: #9b97b8;
				}
			}

			.content-row-button {
				box-sizing: border-box;
				padding: 0 50rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				border-radius: 40rpx;
				background-image: linear-gradient(to left, #ff94b4, #fe437a);
			}
		}


		.fun {
			width: 100%;
			margin-bottom: 30rpx;

			.fun-item {
				width: calc(50% - 15rpx);
				height: 150rpx;
				border-radius: 20rpx;
				background-color: #fbf8f3;

				.fun-img {
					width: 80rpx;
					height: 80rpx;
					margin: 0 24rpx 0 40rpx;
					border-radius: 50%;
				}

				view {
					color: #b43562;
				}
			}

		}

		.signature {
			margin-bottom: 30rpx;
		}




		.nav {
			width: 100%;
			height: 130rpx;

			.nav-item {
				height: 100rpx;
				transition: all .3s;

				.nav-item-title {
					color: #747474;
					transition: all .3s;
				}

				.nav-item-str {
					opacity: 0;
					transition: all .3s;
					width: 50rpx;
					height: 30rpx;
				}
			}

			.nav_item {
				.nav-item-title {
					color: #fe437a;
					font-size: 34rpx;
					transition: all .3s;
				}

				.nav-item-str {
					position: relative;
					width: 50rpx;
					height: 30rpx;
					transition: all .3s;
					opacity: 1;
				}
			}



		}


		.infr {
			width: 100%;
			margin: 0 auto 30rpx auto;
		}

		.infr-row {
			width: calc(100% - 30rpx);
			height: 88rpx;

			.infr-row-item {
				height: 100%;
				margin-left: 20rpx;

				.infr-row-item-title {
					margin-right: 10rpx;
				}
			}
		}

		.label {
			width: 100%;
			flex-wrap: wrap;

			.label-item {
				box-sizing: border-box;
				padding: 0 30rpx;
				height: 50rpx;
				border-radius: 25rpx;
				margin-left: 20rpx;
				margin-top: 20rpx;
				line-height: 50rpx;
				background-color: #8e95c3;
			}
		}


		.item {
			position: relative;
			margin-bottom: 20rpx;
			padding-bottom: 20rpx;

			.m-line {
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
			}

			.item-time {
				height: 50rpx;
			}

			.item-text {
				margin-bottom: 15rpx;
			}

			.item-list {
				position: relative;
				left: -15rpx;
				width: calc(100% + 15rpx);
				flex-wrap: wrap;

				.item-img {
					width: calc(33.33% - 15rpx);
					height: 230rpx;
					margin-left: 15rpx;
					margin-bottom: 15rpx;
					border-radius: 14rpx;
					background-color: #4bfff0;
				}
			}

		}





	}

	.operate {
		box-sizing: border-box;
		padding: 20rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 99;
		width: 100%;
		background-color: #fff;

		view {
			color: #b53663;
		}

		.operate-icon {
			width: 40rpx;
			height: 40rpx;
			margin-right: 10rpx;
		}

		.operate-item {
			.operate-icon {
				margin-right: 0rpx;
			}
		}

		.operate-button_ {
			box-sizing: border-box;
			padding: 0 30rpx;
			height: 80rpx;
			border-radius: 44rpx;
			background-image: linear-gradient(to left, #c745fd, #d36dfd);

			.size_white {
				color: #fff;
			}
		}

		.operate-button {
			box-sizing: border-box;
			padding: 0 30rpx;
			height: 80rpx;
			border-radius: 44rpx;
			border: 1px solid #c24879;
		}
	}

	.info-bg {
		width: 750rpx;
		height: 460rpx;
		background-size: 100%;

		.nav-bar {
			margin-left: 40rpx;
		}
	}

	.info-content {
		width: 750rpx;
		border-radius: 30rpx 30rpx 0 0;
		position: relative;
		top: -30rpx;
		overflow-y: auto;

		.content-warp {
			width: 694rpx;
			margin: 0 auto;

			.base-info {
				display: flex;
				justify-content: space-between;

				.info-avater {
					margin-right: 26rpx;
					width: 106rpx;
					height: 106rpx;
					border-radius: 50%;
					overflow: hidden;


					image {
						width: 136rpx;
						height: 136rpx;
						display: block;
					}
				}

				.info-name {
					.address {
						font-weight: 500;
						color: #d4d4d4;
						font-size: 24rpx;

						.local_i,
						.id_icon {
							width: 24rpx;
							height: 24rpx;
							display: inline-block;
							vertical-align: middle;

						}

						text {
							margin-left: 8rpx;
							vertical-align: middle;
						}


						.idshow {
							width: 148rpx;
							height: 40rpx;
							line-height: 40rpx;
							background: #F8F8F8;
							border-radius: 16rpx;
							text-align: center;
						}

						text {
							margin-left: rpx;
						}
					}

					.info-name-line1 {
						display: flex;
						align-items: center;

						view {
							margin-right: 10rpx;
						}

						.nick-name {
							height: 32rpx;
							font-size: 32rpx;
							font-weight: 600;
							color: #fff;
							line-height: 32rpx;

						}

						.sex_icon {
							width: 24rpx;
							height: 24rpx;
							display: block;
						}

						.info-real {
							width: 68rpx;
							height: 22rpx;
							display: block;

						}

						.info-pass {
							width: 128rpx;
							height: 32rpx;
							display: block;
						}
					}
				}

				.collect {
					display: flex;
					justify-content: center;
					align-items: center;

					width: 104rpx;
					height: 62rpx;
					border-radius: 50rpx;
					border: 2rpx solid #fff;

					.icon {
						width: 30rpx;
						height: 30rpx;
						background: #fff;
					}
				}
			}


			.info-jieshao-content {
				width: 672rpx;
				margin: 0 auto;
				height: 64rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #C2C2C2;
				line-height: 32rpx;
			}

			.age-line {
				width: 694rpx;
				margin: 0 auto;
				height: 140rpx;
				background: #FBF8FF;
				border-radius: 24rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;

				.age-line-item {
					.value {

						height: 36rpx;
						font-size: 36rpx;
						font-weight: bold;
						color: #A75FFF;
						line-height: 36rpx;
					}

					.key {

						height: 34rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #B892E1;
						line-height: 34rpx;
						text-align: center;
					}

				}
			}

			.lable-line {
				display: flex;


				font-size: 24rpx;

				.lable {
					width: 128rpx;
					text-align: center;
					line-height: 40rpx;
					height: 40rpx;
					background: #FBF8FF;
					border-radius: 20rpx;
					margin-right: 16rpx;
				}

				.lable1 {
					color: #b55bfd;
				}

				.lable2 {
					color: #ff964d;
				}

				.lable3 {
					color: #fd5b9c;
				}
			}

			.info-h2 {

				height: 36rpx;
				background-size: 144rpx 18rpx;
				background-position: 0 18rpx;

				font-size: 36rpx;
				font-weight: 600;
				color: #fff;
				line-height: 36rpx;
			}


			.photo-line {
				background: rgba(255, 255, 255, 0.1);
				padding: 20rpx;
				box-sizing: border-box;
				border-radius: 20rpx;

				.info-photo-empty {
					height: 210rpx;
					text-align: center;
					line-height: 210rpx;
					color: #dcdcdc;
				}

				.info-photo-have {
					margin-top: 30rpx;
					flex-wrap: wrap;
					display: flex;
					justify-content: space-between;

					.info-photo-view {
						width: 200rpx;
						max-height: 200rpx;
						overflow: hidden;
						// margin-right: 30rpx;
						margin-bottom: 20rpx;
						border-radius: 20rpx;

						image {
							flex: 1;
							width: 200rpx;
							width: 200rpx;
						}
					}
				}


			}


			.xinxi-line {
				.xinxi-item {
					display: flex;
					height: 60rpx;
					line-height: 60rpx;
					font-size: 28rpx;

					view {
						flex: 1;

						.key {
							color: #C6C6C6;
						}

						.value {
							font-weight: 550;
							color: #fff;
						}
					}



				}
			}

			.weixin {
				width: 694rpx;
				margin: 0 auto;
				height: 100rpx;
				background: rgba(255, 255, 255, 0.1);
				border-radius: 24rpx;
				display: flex;
				align-items: center;
				padding: 0 20rpx;
				box-sizing: border-box;


				.weixin_icon {
					width: 40rpx;
					height: 40rpx;
					margin-right: 20rpx;
				}

				.weixin-text {
					font-weight: 550;
					font-size: 28rpx;
					color: #fff;
				}

			}

		}
	}
	
	.edit{
		background: rgba(255, 255, 255, 0.1);
		border-radius: 30rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 24rpx;
		color: #FFFFFF;
		text-align: center;
		padding: 5rpx 20rpx;
		height: 50rpx;
	}

	.pay-account {
		width: 600rpx;
		background: #FFF3F8;
		padding: 30rpx;
		border-radius: 10rpx;
		box-sizing: border-box;
		text-align: center;
	}

	.account-title {
		margin-bottom: 50rpx;
		font-size: 36rpx;
	}

	.account-content {
		margin-bottom: 30rpx;

		.account-copy {
			color: #FF185E;
			font-size: 24rpx;
			margin-left: 20rpx;
			border: 2rpx solid #ffcde6;
			border-radius: 20rpx;
			padding: 6rpx 30rpx;
		}
	}

	.payinfo-title {
		margin-bottom: 60rpx;
	}

	.payinfo-jiesuo {
		width: 500rpx;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		color: #fff;
		border: 1rpx solid #fff;
		box-sizing: border-box;
		border-radius: 40rpx;
		margin-bottom: 40rpx;
		font-size: 28rpx;
	}

	.payinfo-vip {
		width: 500rpx;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		color: #fff;
		background: linear-gradient(314deg, #9c8bfc 0%, #806ef9 100%);
		border-radius: 40rpx;
		font-size: 28rpx;
	}



	// 升级vip 弹窗
	.unvip-wrap {
		width: 600rpx;
		background: #fff;
	    //color: #fff;
		padding: 50rpx 0;
		border-radius: 10rpx;
		box-sizing: border-box;
		text-align: center;

		.unvip-content {
			padding: 0 80rpx;
		}

		.unvip-btn {
			width: 500rpx;
			height: 80rpx;
			margin: 0 auto;
			text-align: center;
			line-height: 80rpx;
			color: #fff;

			background: linear-gradient(127deg, #FFF4DE 0%, #FFE6BA 100%, #FFE6BA 100%);
			// background: linear-gradient(127deg, #FFF4DE 0%, #FFE6BA 100%, #FFE6BA 100%);
			// background: linear-gradient(127deg, #FFF4DE 0%, #FFE6BA 100%, #FFE6BA 100%);
			border-radius: 40rpx;
			font-size: 28rpx;
			margin-top: 80rpx;
		}
	}
	
	.btns {
			display: flex;
			justify-content: space-between;
			flex-direction: row;
			font-size: 32rpx;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 100rpx;
			text-align: center;
			z-index: 888;
			margin: 0 30rpx 30rpx;
	
			.btn {
				flex: 1;
				height: 100rpx;
				border-radius: 12rpx;
				margin-left: 10rpx;
				margin-right: 10rpx;
			}
	
			.btn1 {
				background: rgba(255, 255, 255, 0.1);
			}
	
			.btn2 {
				background: linear-gradient(127deg, #FFF4DE 0%, #FFE6BA 100%, #FFE6BA 100%);
				color: #A14617;
			}
		}
	
	
</style>